<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>云原生数据库 TeleDB for InfluxDB</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          TeleDB for
          InfluxDB是高性能的时序数据库。完全兼容开源influxdb协议。采用先进架构提供时序数据的高速写入和查询服务。适用于大规模的时序数据存储并进行实时分析。
        </div>
        <div class="section-title mt-20">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          TeleDB for
          InfluxDB适用于写多读少、无事务要求、基于时间聚合分析和告警系统。以下是典型的应用场景
        </div>
        <div class="img-box mb-20 bor">
          <img :src="imgUrl" alt="" />
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav10',
  data () {
    return {
      list: [
        {
          name: '数据自动采集',
          label:
            '通过安装agent方式实现自动采集数据。用户采用Telegraf agent、scrape data及其他等大量组件实现自动收集数据。'
        },
        {
          name: '数据读写',
          label:
            '提供多种方式高性能读写数据能力。完全兼容 InfluxDB 读写协议，提供sdk、influx Cli、http api以及其他开发者工具读写数据。同时支持influxQL以类sql方式管理数据和以函数方式处理数据 。'
        },
        {
          name: '数据管理',
          label:
            '提供web、sdk以及cli等方式管理数据。InfluxDB以组织的方式划分bucket，每个组织和bucket分配token，隔离了数据访问。用户可通过严格的安全验证和丰富的开发者工具操作与管理数据。'
        },
        {
          name: '告警监控',
          label:
            '提供实例、指标以及用户的写入、查询等监控并发出告警功能。用户通过设置检查点，监控数据满足检查点即发出告警，InfluxDB提供丰富的告警方式。'
        },
        {
          name: '数据展示',
          label:
            '提供灵活的交互和丰富的图表展示数据。用户可采用类sql、api、cli等交互方式获取数据。可选择列表式、直方图等方式展示数据。'
        },
        {
          name: '数据分析',
          label:
            '提供强大的数据分析能力。采用海量的函数对数据进行分析，并使用task方式让数据分析后台运行，保证用户体验。'
        },
        {
          name: '数据备份',
          label:
            '提供简单快捷的数据备份功能。通过导入导出可以直接备份与恢复数据，或通过插件方式备份到指定存储。'
        }
      ],
      imgUrl: require('../../assets/images/pic/img-10-1.png'),
      frameworkImg: require('../../assets/images/pic/img-10.png')
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.list-box {
}
</style>
